
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="xuejianxinokok">
<title>eMark试题测试</title>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<meta name="theme-color" content="#563d7c">
<style>
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media ( min-width : 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}

body {
	padding-top: 3.5rem;
}

table {
	border-collapse: collapse;
	margin: 0 auto;
	text-align: center;
}

table td, table th {
	border: 1px solid #cad9ea;
	color: #666;
	height: 30px;
}

table thead th {
	background-color: #CCE8EB;
	width: 100px;
}

table tr:nth-child(odd) {
	background: #fff;
}

table tr:nth-child(even) {
	background: #F5FAFA;
}
</style>



</head>
<body>
	<!-- 模板地址 https://v4.bootcss.com/docs/examples/jumbotron/ -->
	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
		<a class="navbar-brand" href="#">Navbar</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarsExampleDefault"
			aria-controls="navbarsExampleDefault" aria-expanded="false"
			aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse navbar-collapse" id="navbarsExampleDefault">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active"><a class="nav-link" href="#">Home
						<span class="sr-only">(current)</span>
				</a></li>

				</li>

			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="text" placeholder="Search"
					aria-label="Search">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
			</form>
		</div>
	</nav>

	<main role="main">

		<!-- Main jumbotron for a primary marketing message or call to action -->
		<div class="jumbotron">
			<div class="container">
				<h1 class="display-3">eMark试题渲染demo11</h1>
				<p>这是一个Demo.</p>
				<p>
					<a class="btn btn-primary btn-lg" href="/swagger-ui.html"
						target="_blank">API文档</a> &nbsp;&nbsp; <a
						class="btn btn-primary btn-lg" href="/h2-console" target="_blank">查看数据库</a>

				</p>
			</div>
		</div>

		<div class="container" id="app">
			<div class="row" v-for="(o,i) in list" :key="o.id">
				<div class="col-md-12">
					<h3>{{i+1}} 类型:{{o.flag}},难度:{{o.difficulty}},分数:{{o.score}},</h3>
					<p v-html="o.title"></p>
					<h3>试题答案</h3>
					<p v-html="o.answer"></p>
					<h3>试题解析</h3>
					<p v-html="o.remark"></p>
					<h3>试题选项</h3>
					1.
					<p v-html="o.option1"></p>
					2.
					<p v-html="o.option2"></p>
					3.
					<p v-html="o.option3"></p>
					4.
					<p v-html="o.option4"></p>
					5.
					<p v-html="o.option5"></p>
					6.
					<p v-html="o.option6"></p>
					<p>
						<a class="btn btn-secondary" href="#" role="button">View
							details &raquo;</a>
					</p>
				</div>
			</div>
			<div>
				<hr>
				<h3>公式测试</h3>
				<p>$$ \begin{pmatrix} 1 & a_1 & a_1^2 & \cdots & a_1^n \\ 1 &
					a_2 & a_2^2 & \cdots & a_2^n \\ \vdots & \vdots & \vdots & \ddots &
					\vdots \\ 1 & a_m & a_m^2 & \cdots & a_m^n \\ \end{pmatrix} $$</p>
				<hr>

				<p>\begin{align} \sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\ & =
					\sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\ & =
					\sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\ & =
					\frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\ & \approx
					\frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right) \end{align}</p>
				<hr>

				<!-- 参考 https://blog.csdn.net/weixin_43801428/article/details/108382795 
				官方文档配置
				Configuring MathJax After it is Loaded
				http://docs.mathjax.org/en/latest/web/configuration.html#web-configuration
				-->


			</div>

		</div>
		<!-- /container -->

	</main>

	<footer class="container">
		<p>&copy; Company 2022-2030</p>
	</footer>


	<script src="./resources/js/http.js"></script>
	<script src="./resources/js/vue.global.prod3.2.26.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

	<script type="text/javascript">
        Vue.createApp({
           data(){
               return { 
                  msg  :'消息'
                 ,list :[]
               }
           },
           mounted:function(){
              this.query(); 
              this.$nextTick(function () {
                    MathJax = {
            		  tex: {
            		     inlineMath: [['$', '$'], ['\\(', '\\)']]
            		  }
            		};
              });
           },
           
           methods:{
               
               query(){
                    $http.post("/list",{}).then(res=>{
                    	let list=res.data;
                        for(let o of list){
                      	  Object.assign(o,{
                      		  title: marked.parse(o.title||''),
                      		answer: marked.parse(o.answer||''),
                      		remark: marked.parse(o.remark||''),
                      		option1: marked.parse(o.option1||''),
                      		option2: marked.parse(o.option2||''),
                      		option3: marked.parse(o.option3||''),
                      		option4: marked.parse(o.option4||''),
                      		option5: marked.parse(o.option5||''),
                      		option6: marked.parse(o.option6||'')
                      	  })
                        }	
                       this.list=list;
                    }) 
               }
               
               ,
               deleteById(id){
                   $http.post("index/deleteByIds",[id]).then(res=>{
                       this.query();
                   }) 
               },
               
               updateById(o){
                   $http.post("index/update",o).then(res=>{
                       this.query();
                   }) 
               }
               ,
               listPage(){
                   $http.post("index/listPage",{pageNum:1,pageSize:2}).then(res=>{
                      let {pageNum,pageSize,pages ,size,list}=res;
                      this.list=list;
                   }) 
               },
               sendMessage() {
                   $http.post("index/sendMessage",{msg:this.msg}).then(res=>{
                       //if(res.success){
                       //    alert(res.message);
                       //}
                       console.log(res);
                       this.query();
                   })
               },
               
               
               
               
               
           }
        }).mount('#app');
        
    </script>

	<script src="./resources/js/polyfill.min.js?features=es6"></script>
	<script id="MathJax-script" async src="./resources/js/tex-mml-chtml.js"></script>
	<script>
		
    </script>


</body>
</html>
